import path from "node:path";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import viteImagemin from "vite-plugin-imagemin";
import viteCompression from "vite-plugin-compression";
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import Font from "vite-plugin-font";
// 自动按需导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/", // 基础公共路径
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./"), // 别名
      "@": path.resolve(__dirname, "./src"),
    },
    // https://cn.vitejs.dev/config/#resolve-extensions
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"], // 解析的文件类型
  },
  // vite 相关配置
  server: {
    port: 8888, // 端口号
    host: true, // 主机
    open: false, // 是否自动打开浏览器
    proxy: {
      // ! https://cn.vitejs.dev/config/#server-proxy
      // 例： http://127.0.0.1:8888/dev-api/login -> http://127.0.0.1:3000/login
      // * 如果想看转换后的url
      // vite 可以在package.json中进行配置--debug "dev": "vite --debug", // 加了 --debug 启用 Vite 的调试模式 可以看 proxy 进行转换以后的 url
      // webpack 配置logLevel
      "/dev-api": {
        target: "http://127.0.0.1:3000", // 代理目标
        changeOrigin: true, // 将主机标头的来源更改为目标 URL
        rewrite: path => path.replace(/^\/dev-api/, ""), // 重写路径
      },
    },
  },
  // fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
  css: {
    postcss: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
        {
          // PostCSS 插件：用于移除 @charset 规则
          postcssPlugin: "internal:charset-removal",
          AtRule: {
            // 处理 @charset 规则
            charset: atRule => {
              if (atRule.name === "charset") {
                atRule.remove(); // 移除 @charset 规则
              }
            },
          },
        },
      ],
    },
    preprocessorOptions: {
      scss: {
        // SCSS 预处理器选项 不能将 tailwind.scss 放到这里来 否则会不生效 个人认为是顺序原因
        additionalData: `@import "./src/assets/styles/common.scss";`, // 添加额外的数据，引入 common.scss 文件
      },
    },
  },
  // 插件
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // 图片压缩
    viteImagemin({
      verbose: true, // 是否在控制台输出压缩结果
      gifsicle: { optimizationLevel: 7, interlaced: false },
      optipng: { optimizationLevel: 7 }, // 无损压缩配置，无损压缩下图片质量不会变差
      mozjpeg: { quality: 20 },
      pngquant: { quality: [0.8, 0.9], speed: 4 }, // 有损压缩配置，有损压缩下图片质量可能会变差
      webp: { quality: 75 },
      svgo: {
        plugins: [{ name: "removeViewBox" }, { name: "removeEmptyAttrs", active: false }],
      },
    }),
    // 在plugins配置数组里添加gzip插件
    viteCompression({
      verbose: true, // 默认即可
      disable: false, // 开启压缩(不禁用)，默认即可
      deleteOriginFile: false, // 删除源文件
      threshold: 4 * 1024, // 压缩前最小文件大小
      algorithm: "gzip", // 压缩算法
      ext: ".gz", // 文件类型
    }),
    // 使用 CDN 加速 注意需要在 build 时忽略依赖
    // importToCDN({
    //   modules: [
    //     // 支持自动导入 只能导入部分常用的
    //     autoComplete("axios"),
    //     {
    //       name: "echarts",
    //       var: "echarts",
    //       path: `https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js`,
    //     },
    //   ],
    // }),
    // 字体优化
    Font.vite({ scanFiles: ["src/**/*.{vue,ts,tsx,js,jsx}"] }),
  ],
  build: {
    rollupOptions: {
      // external: ["axios", "echarts"], // 忽略依赖
      output: {
        chunkFileNames: "static/js/[name]-[hash].js", // 引入文件名的名称
        entryFileNames: "static/js/[name]-[hash].js", // 包的入口文件名称
        assetFileNames: "static/[ext]/[name]-[hash].[ext]", // 资源文件像 字体，图片等
        // manualChunks(id) {
        //   // 如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中，减少http请求，如果不同模块使用不同插件明显，那就分成不同模块打包。这是一个矛盾体。
        //   if (id.includes("node_modules")) {
        //     // 让每个插件都打包成独立的文件 这里使用的是最小化拆分包
        //     // return id.toString().split("node_modules/")[1].split("/")[0].toString();
        //     // 前者可以直接选择返回'vendor'。
        //     return "vendor";
        //   }
        // },
        // 合并路由打包
        manualChunks: {
          vue: ["vue", "vue-router"],
          echarts: ["echarts"],
        },
      },
    },
    commonjsOptions: {
      // 将 CommonJS 模块转换为 ES6 模块的配置项。可以通过该选项来优化 CommonJS 模块的加载方式，以提升打包速度和代码质量。
      transformMixedEsModules: true,
    },
    // 文件内联的大小限制。可以通过该选项来控制文件内联的大小，以提升加载速度
    assetsInlineLimit: 10 * 1024, // 默认 4096 资源内联大小限制（单位：字节），小于此值的资源将被内联为 base64
  },
});
